{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends 'newsletter/base.html' %}

{# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}

{% block page_title %}{{ ftl('newsletters-newsletter-email-recovery') }}{% endblock page_title %}

{% block page_css %}
  {{ css_bundle('newsletter-recovery') }}
{% endblock %}

{% block content %}
  <main>
    {% if fxa_error %}
      <div class="mzp-c-notification-bar mzp-t-error">
        <p>{{ ftl('newsletters-fxa-error-retry') }}</p>
      </div>
    {% endif %}

    {# noscript warning to enable JavaScript #}
    <noscript>
      <div class="mzp-c-notification-bar mzp-t-error">
        <p>{{ ftl('ui-please-turn-on-javascript') }}</p>
      </div>
    </noscript>

  <div class="mzp-l-content mzp-t-content-sm">
    <h1 class="mzp-u-title-sm">{{ ftl('newsletters-manage-your-newsletter') }}</h1>

    <form method="post" action="{{ recovery_url }}" id="newsletter-recovery-form" class="newsletter-recovery-form mzp-c-form" data-testid="newsletter-recovery-form">
      <header class="mzp-c-newsletter-header">
        <p>{{ ftl('newsletters-enter-your-email-address') }}</p>
      </header>

      <div class="mzp-c-form-errors {% if not messages %}hidden{% endif %}" id="newsletter-errors" data-testid="newsletter-recovery-error-message">
        <ul class="mzp-u-list-styled">
          <li class="error-email-invalid hidden">{{ ftl('newsletters-this-is-not-a-valid-email') }}</li>
          <li class="error-email-not-found hidden">{{ ftl('newsletters-this-email-address-is-not', url=url('newsletter.subscribe')) }}</li>
          <li class="error-try-again-later hidden">{{ ftl('newsletters-we-are-sorry-but-there') }}</li>
          {# Messages for users who are redirected here via the newsletter preferences page, e.g. when a bad token is supplied. #}
          {% if messages %}
            {% for message in messages %}
              <li>{{ message }}</li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>

      <div class="newsletter-recovery-form-success-msg hidden" data-testid="newsletter-recovery-thanks">
        <p>{{ ftl('newsletters-success-an-email-has-been-sent') }}</p>
      </div>

      <div class="newsletter-recovery-form-fields">
        <div class="mzp-c-field mzp-l-stretch">
          <label for="id_email" class="mzp-c-field-label">{{ ftl('newsletters-your-email-address') }}</label>
          {{ field_with_attrs(form.email, class='mzp-c-field-control'|safe) }}
        </div>
        <div class="mzp-c-button-container mzp-l-stretch">
          <button class="mzp-c-button" id="newsletter-submit" type="submit" data-testid="newsletter-recovery-submit">{{ ftl('newsletters-send-me-a-link') }}</button>
        </div>
      </div>
    </form>
  </div>
  </main>
{% endblock %}

{% block js %}
  {{ js_bundle('newsletter-recovery') }}
{% endblock %}
